
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
  <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
  <title>angular与javascript相互调用</title>
  <script src="../angular-1.5.6/angular.js"></script>
  <script src="todo.js"></script>
  <link rel="stylesheet" href="todo.css" />


  <style type="text/css">
  </style>
</head>
<body>
  <h2>Todo</h2>
  <div ng-controller="Todocontroller as todoList" class="">
    <span>{{todoList.remaining}} of {{todoList.todos.length}} remaining</span>
    [<a href="" ng-click="todoList.archive()">archive</a>]
    <ul class="unstyled">
      <li ng-repeat="todo in todoList.todos">
        <label class="checkbox">
          <input type="checkbox" ng-model="todo.done">
          <span class="done-{{todo.done}}">{{todo.text}}</span>
        </label>
      </li>
    </ul>
    <form ng-submit="todoList.addTodo()">
      <input type="text" ng-model="todoList.todoText"  size="30"
               placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</body>

</html>
